<!-- 弹窗 -->
<template>
    <div>
        <el-dialog
            :model-value="show"
            :title="title"
            :show-close="showClose"
            :draggable="draggable"
            :modal="modal"
            :top="top"
            :width="width"
            :close-on-click-modal="clickModal"
            class="cust-dialog"
            @close="close">
            <template #header>
                <div class="header">{{ title }}</div>
            </template>
            <!-- 弹窗中间部分 -->
            <div
                class="dialog-body"
                :style="{ height: height}">
                <slot></slot>
            </div>
            <!-- 弹窗底部 -->
            <div v-if="loginType" class="dialog-footer">
                <span @click="callback"><&nbsp;&nbsp;扫码登录</span>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue';

const props = defineProps({
    // 显示关闭
    show: {
        type: Boolean,
        default: false
    },
    // 标题
    title: {
        type: String,
        default: 'title'
    },
    // 右上角关闭按钮
    showClose: {
        type: Boolean,
        default: true
    },
    // 是否可以拖拽移动
    draggable: {
        type: Boolean,
        default: true
    },
    // 是否需要遮罩层
    modal: {
        type: Boolean,
        default: false
    },
    // 顶部距离
    top: {
        type: String,
        default: '80px'
    },
    // 弹窗宽度
    width: {
        type: String,
        default: '500px'
    },
    // 弹窗高度
    height: {
        type: String,
        default: '250px'
    },
    // 是否可以通过点击空白处关闭弹窗
    clickModal: {
        type: Boolean,
        default: false
    },
    // 
    loginType: {
        type: Number,
        default: 1
    },
    // 回调
    callback: {
        type: Function as PropType<() => void>
    }
});

const emit = defineEmits(['close']);
const close = () => {
    emit('close');
};
</script>

<style lang="scss" scoped>
.header{
    color: white;
    font-size: 15px;
    font-weight: 600;
}

:deep(.cust-dialog) {
    padding: 0px;
    margin-bottom: 0px !important;
}

:deep(.el-dialog__header) {
    border-bottom: 1px solid #ddd;
    padding: 10px 0px 10px 15px;
    background: #2D2D2D;
    border-radius:4px 4px 0 0;
}

:deep(.dialog-body) {
    min-height: 100px;
    overflow: auto;
}
:deep(.dialog-body::-webkit-scrollbar) {
    width: 6px;
    height: 6px;
}
:deep(.dialog-body::-webkit-scrollbar-track) {
    background: #f0f0f0;
}
:deep(.dialog-body::-webkit-scrollbar-thumb) {
    background: linear-gradient(to bottom, #28aae6, #d1ec04);
    border-radius: 6px;
    border: 1px solid #fff;
}

:deep(.dialog-footer) {
    text-align: left;
    border-top: 1px solid #c6c6c6;
    border-radius: 0 0 4px 4px;
    background-color: #f7f7f7;
    
    span{
        cursor: pointer;
        color: #0c72c3;
        font-size: 13px;
        line-height: 48px;
        padding-left: 20px;
    }
}

</style>
